<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顺丰快递单</title>
    <link rel="shortcut icon" href="favicon.ico">
    <script src="../../../res/plugins/bootstrap/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../res/plugins/layerui/layer/layer.js"></script>
    <script src="../../../res/js/openx.js"></script>
    <script src="../../../js/order/print/jquery-barcode.js"></script>

</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, "SimHei";
        }

        body {
            background-color: #fff;
            font-size: 10pt;
        }

        .content {
            padding: 1mm;
            width: 100mm;
            height: 150mm;
            background-color: #fff;
            margin: 0 auto;
            border: 1px dotted #000;
        }

        .top {
            height: 13mm;
            border-bottom: 1px dotted #000;
        }

        .flexMain {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        .flexend {
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            display: -webkit-box;
            display: -moz-box;
            -webkit-align-items: flex-end;
            -moz-align-items: flex-end;
            align-items: flex-end;
            -webkit-box-align: end;
            -moz-box-align: end;
        }

        .flexAlign {
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            display: -webkit-box;
            display: -moz-box;
            -webkit-align-items: center;
            -moz-align-items: center;
            align-items: center;
            -webkit-box-align: center;
            -moz-box-align: center;
        }

        .codebig {
            height: 20mm;
            border-bottom: 1px dotted #000;
        }

        .codebox {
            width: 70mm;
            height: 100%;
            padding: 3mm 0mm;
            border-right: 1px dotted #000;
            font-size: 10pt;
            margin-left: 0px;
            padding-left:0px;
        }

        .codebig .textbox h2 {
            font-size: 12pt;
            border-bottom: 1px dotted #000;
            text-align: center;
            font-weight: normal;
        }

        .codebig .textbox h3 {
            font-size: 16pt;
            font-weight: normal;
        }

        .codebig .textbox h4 {
            font-size: 8pt;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: normal;
        }

        .codebig .textbox p {
            font-size: 10pt;
            padding-left: 2px;
        }

        .borderb {
            border-bottom: 1px dotted #000;
        }

        .bourntitle {
            width: 6mm;
            text-align: center;
            border-right: 1px dotted #000;
            height: 100%;
            font-size: 7pt;
            padding: 0 1mm;
        }

        .detail {
            height: 100%;
            border-right: 1px dotted #000;
            font-size: 0;
        }

        .detail p {
            display: inline-block;
            min-width: 33.3%;
            padding-right: 2mm;
            font-size: 8pt;
        }
    </style>
    <div class="content">
        <div class="top" style="overflow: hidden;">
            <div style="float: right; margin-right: 23mm; min-width: 25mm; font-size: 30pt">E</div>
        </div>

        <div class="codebig flexAlign">
            <div class="codebox" style="overflow:hidden;">
                <div id="mainNoBarcodeOne"></div>
            </div>
            <div class="flexMain textbox">
                <h2>顺丰次日</h2>
                <h3 style="visibility:hidden;" name="collectionPayment">代收货款</h3>
                <h4 style="visibility:hidden;" name="collectionPayment" id="sfExpressAgencyCardNumber"></h4>
                <p style="visibility:hidden;" name="collectionPayment" id="agencyFund"></p>
            </div>
        </div>

        <!-- 目的地 -->
        <div class="flexAlign borderb" style="height: 12mm;">
            <div class="bourntitle flexAlign">目的地</div>
            <div class="flexMain" style="font-size: 32pt;"><b id="destination"></b></div>
        </div>

        <!-- 收件 -->
        <div class="flexAlign borderb" style="height: 13mm;">
            <div class="bourntitle flexAlign">收件</div>
            <div class="flexMain" style="font-size: 12pt" name="receiverText">

            </div>
        </div>

        <!-- 寄件 -->
        <div class="flexAlign borderb" style="height: 9mm;">
            <div class="bourntitle flexAlign">寄件</div>
            <div class="flexMain" style="font-size: 8pt; " name="sendText">

            </div>
            <div style="width: 22mm; text-align: center; border-left: 1px dotted #000; height: 100%;">
                <h2 style="font-size: 12pt;">云仓次日</h2>
                <!--<h2 style="font-size: 12pt;visibility:hidden;">定时派送</h2>-->
                <p style="font-size: 10pt;visibility:hidden;">自寄 自取</p>
            </div>
        </div>

        <!-- 签名 -->
        <div class="flexAlign" style="height: 14mm">
            <div class="detail flexMain borderb">
                <p>付款方式:寄付</p>
                <p>计费重量:</p>
                <p>包装费用:</p>
                <p>第三方地区:</p>
                <p>声明价值:</p>
                <p>运费:</p>
                <p>实际重量:</p>
                <p>保价费用:</p>
                <p>费用合计:</p>
                <p id="sfExpressCustId"></p>
                <p>派送日期:</p>
            </div>
            <div style="width: 23mm;height: 100%; padding-left: 1mm">签名：</div>
        </div>

        <!-- 托寄物 -->
        <div class="flexAlign borderb" style="height: 10mm">
            <div class="flexMain flexAlign" style="height: 100%;">
                <div class="bourntitle flexAlign">托寄物</div>
                <div class="flexMain" style="text-align: center;">日用品</div>
                <div style="width: 30mm; border-left: 1px dotted #000;border-right: 1px dotted #000; height: 100%; font-size: 8pt; padding-left: 0.5mm;">
                    <p>收件员:</p>
                    <p name="nowDate"></p>
                    <p>派件员:</p>
                </div>
            </div>

            <div style="width: 23mm; height: 100%; padding-top: 3mm ">
                <span style="padding-left: 7mm">月</span>
                <span style="padding-left: 5mm">日</span>
            </div>
        </div>

        <!-- 条形码 -->
        <div class="flexAlign borderb" style="height: 15mm">
            <div class="flexMain" style="width: 26mm; height: 100%;padding: 1mm;">
                <img src="../../../res/images/SFlogo.png" height="100%" alt=""></div>
            <div class="codebox" style="width: 45mm;border: 0; padding-left: 0">
                <div id="mainNoBarcodeTwo"></div>
            </div>
            <div class="flexMain" style="font-size: 8pt">
                <p>付款方式:寄付</p>
                <p name="mailNo"></p>
            </div>
        </div>

        <!-- 寄件 -->
        <div class="flexAlign borderb" style="height: 10mm;">
            <div class="bourntitle flexAlign">寄件</div>
            <div class="flexMain" style="font-size: 8pt; " name="sendText"></div>
        </div>

        <!-- 收件 -->
        <div class="flexAlign borderb" style="height: 10mm;">
            <div class="bourntitle flexAlign">收件</div>
            <div class="flexMain" style="font-size: 8pt; " name="receiverText"></div>
        </div>

        <div class="flexAlign" style="height: 10mm;">
            <div class="flexMain" style="font-size: 8pt; " id="remark"></div>
        </div>

    </div>
</body>
<script type="text/javascript">
    var deliveryCode = UrlParameter()['deliveryCode'];
    var logisticsId = UrlParameter().logisticsId;
    $X("/logistics/logisticsListService", "getPrintInfo").callx({
        deliveryCode: deliveryCode,
        logisticsId:logisticsId,
        onResult: function (data) {
            layer.closeAll('loading')
            if (data) initContent(data);
            $("#mainNoBarcodeOne >div").eq(0).remove()
        }, onError: function (error) {
            var res = JSON.parse(error);
            layer.msg("打印失败原因：" + res.message)
        }

    
    });

    function initContent(data) {
        //收件人信息
        $('div[name="receiverText"]').html((data.receiverName !== undefined ? data.receiverName : '') + '  ' + (data.receiverPhone !== undefined ? data.receiverPhone : '') + '  ' + (data.receiverAddress !== undefined ? data.receiverAddress : ''));
        //寄件人信息
        $('div[name="sendText"]').html((data.sendName !== undefined ? data.sendName : '') + '  ' + (data.sendPhone !== undefined ? data.sendPhone : '') + '  ' + (data.sendAddress !== undefined ? data.sendAddress : ''));
        $('#remark').html(data.pickSerialNumber !== undefined ? '#' + data.pickSerialNumber : '');// 打印序号
        $('p[name="mailNo"]').html(data.mailNo !== undefined ? ('运单号:' + data.mailNo) : '');
        $('p[name="nowDate"]').html(new Date().format("寄件日期:yyyy-MM-dd"));
        $('#destination').html((data.destCode !== undefined ? data.destCode : ''));
        $('#sfExpressCustId').html(data.sfExpressCustId !== undefined ? ('月结账号:' + data.sfExpressCustId) : '月结账号:');
        //代收货款业务
        var sfExpressAgencyCardNumber = data.sfExpressAgencyCardNumber;
        var agencyFund = data.agencyFund;
        if (sfExpressAgencyCardNumber !== undefined && sfExpressAgencyCardNumber !== '' && agencyFund !== undefined && agencyFund !== '' && agencyFund > 0) {
            $('[name="collectionPayment"]').css('visibility', 'visible');// 显示代收货款区域
            $('#sfExpressAgencyCardNumber').html(sfExpressAgencyCardNumber !== undefined ? ('卡号：' + sfExpressAgencyCardNumber) : '');
            $('#agencyFund').html(agencyFund !== undefined ? ('¥：' + agencyFund + '元') : '');
        }
        $('#mainNoBarcodeOne').empty().barcode(data.mailNo !== undefined ? data.mailNo : '', "code128", {
            barWidth:2,
            barHeight: 40,
            showHRI: true,
            fontSize: 10,
            output: 'css'
        });
        $("#mainNoBarcodeTwo").empty().barcode(data.mailNo !== undefined ? data.mailNo : '', "code128", {
            barWidth: 1,
            barHeight: 30,
            showHRI: true,
            fontSize: 10,
            output: 'css'
        });
        setTimeout(function () {
            window.print();
        }, 500);
    }

</script>

</html>